<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未读消息</title>
<link rel="stylesheet" href="../static/assets/css/style2.css">
    <!-- Favicons -->
<link href="../../../static/assets/img/tubiao.png" rel="icon">
</head>
<body>
  <div class="container">
    <h2>未读消息</h2>
    <ul class="user-list">
    </ul>
  </div>
</body>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const username = '{{ username }}';
        fetch('/unread-messages?username=' + username)
            .then(response => response.json())
            .then(data => {
                const userlist = document.querySelector('.user-list');
                if (Object.keys(data).length > 0) {Object.entries(data).forEach(([recipient, messages]) => {
                    messages.forEach(message => {
                        // 分割发送者和消息内容
                        const [sender, msgContent] = message.split(':');
                        // 创建列表项和链接
                        const li = document.createElement('li');
                        const a = document.createElement('a');
                        if ( sender !== '系统消息' ){
                            a.href = `/user/${username}/${sender}`;
                        }
                        a.textContent = `${sender} 给你留言: ${msgContent}`;
                        li.appendChild(a);
                        userlist.appendChild(li);
                    });
                });
            } else {
                const li = document.createElement('li');
                li.textContent = '暂时没有消息';
                userlist.appendChild(li);
            }
        })
        .catch(error => console.error('Error fetching unread messages:', error));
    });
</script>
</html>
